<template>
  <header class="app-header">
    <div class="header-container">
      <!-- Logo Section -->
      <div class="logo-section">
        <div class="logo">
          <template v-if="magazine && magazine.logo">
            <img :src="magazine.logo.replace('http://124.16.154.205:9000/','/minioUrl/')"/>
          </template>
          <template v-else>
            <img src="../../assets/images/header/logo.png" />
          </template>
          <span v-if="magazine">{{magazine ? magazine.platformName : ''}}</span>
        </div>
      </div>

      <!-- Navigation Menu -->
      <nav class="main-nav">
        <ul class="nav-list">
          <li class="nav-item" :class="{actived:!active || active == '/'}">
            <router-link to="/" class="nav-link">首页</router-link>
          </li>
          <!-- v-if="magazine && magazine.id" -->
          <template >
            <li class="nav-item has-dropdown" v-if="!(magazine && magazine.id)" :class="{actived:active == 'microapp'}">
              <!-- <router-link to="/microapp/eprint/searchList" class="nav-link">预印本平台</router-link> -->
              <a href="#" class="nav-link">预印本平台</a>
              <ul class="dropdown-menu">
                <li><router-link to="/microapp/eprint/preSubmitUpload"  class="dropdown-link">投稿</router-link></li>
                <li><router-link to="/microapp/eprint/searchList"  class="dropdown-link">预览</router-link></li>
                <li><router-link to="/microapp/eprint/searchList"  class="dropdown-link">检索</router-link></li>
                <li><router-link to="/microapp/eprint/myAllPaper"  class="dropdown-link">管理</router-link></li>
              </ul>
            </li>

            <li v-for="menu in finalMenuList" :key="menu.key">
                <!-- 普通菜单 -->
                <template v-if="menu.type === 'normal'">
                  <li class="nav-item"
                      :class="{ actived: active.includes(menu.key) }">
                    <router-link :to="menu.path" class="nav-link">
                      {{ Object.keys(menuConfig).find(k => menuConfig[k] === menu) }}
                    </router-link>
                  </li>
                </template>

                <!-- 电子资源 Dropdown -->
                <template v-else-if="menu.type === 'dropdown'">
                  <li class="nav-item has-dropdown"
                      :class="{ actived: active.includes(menu.key)  && active.indexOf('journal')<0 && active.indexOf('conference')<0 }">
                    <a href="#" class="nav-link">电子资源</a>
                    <ul class="dropdown-menu">
                      <li v-for="child in menu.children" :key="child.key">
                        <router-link :to="child.path" 
                                    :class="{'nav-link': active === child.key}"
                                    class="dropdown-link">
                          {{ child.name }}
                        </router-link>
                      </li>
                    </ul>
                  </li>
            </template>
          </li>
            <!-- <li class="nav-item" :class="{actived:active.indexOf('journal')>=0}">
              <router-link to="/journal" class="nav-link">期刊资源</router-link>
            </li>
            <li class="nav-item" :class="{actived:active.indexOf('conference')>=0}">
              <router-link to="/conference" class="nav-link">会议论文资源</router-link>
            </li>
            <li class="nav-item has-dropdown" :class="{actived:active.indexOf('digitalResource')>=0 && active.indexOf('journal')<0 && active.indexOf('conference')<0 }">
              <a href="#" class="nav-link">电子资源</a>
              <ul class="dropdown-menu">
                <li><router-link to="/resource/video" :class="{'nav-link':active=='digitalResource-video'}" class="dropdown-link">数字视频</router-link></li>
                <li><router-link to="/resource/audio" :class="{'nav-link':active=='digitalResource-audio'}" class="dropdown-link">数字音频</router-link></li>
                <li><router-link to="/resource/text" :class="{'nav-link':active=='digitalResource-text'}" class="dropdown-link">文字资源</router-link></li>
                <li><router-link to="/resource/post" :class="{'nav-link':active=='digitalResource-post'}" class="dropdown-link">文章</router-link></li>
                <li><router-link to="/resource/patent" :class="{'nav-link':active=='digitalResource-patent'}" class="dropdown-link">专利</router-link></li>
                <li><router-link to="/resource/report" :class="{'nav-link':active=='digitalResource-report'}" class="dropdown-link">报告</router-link></li>
                <li><router-link to="/resource/standard" :class="{'nav-link':active=='digitalResource-standard'}" class="dropdown-link">标准</router-link></li>
                <li><router-link to="/resource/ebook" :class="{'nav-link':active=='digitalResource-ebook'}" class="dropdown-link">电子书</router-link></li>
              </ul>
            </li> -->
          </template>
          <!-- <template v-else>
            <li class="nav-item" :class="{actived:active == 'microapp'}">
              <router-link to="/microapp/eprint/searchList" class="nav-link">预印本平台</router-link>
            </li>
            <li class="nav-item has-dropdown" :class="{actived:active.indexOf('digitalResource')>=0}">
              <a href="#" class="nav-link">数字资源</a>
              <ul class="dropdown-menu">
                <li><router-link to="/journal" :class="{'nav-link':active=='digitalResource-journal'}" class="dropdown-link">数字期刊</router-link></li>
                <li><a href="/microapp/eprint/digitalPaperSearchList?searchText=" target="_blank" class="dropdown-link">学术论文</a></li>
                <li><router-link to="/videoAudio/video" :class="{'nav-link':active=='digitalResource-video'}" class="dropdown-link">数字视频</router-link></li>
                <li><router-link to="/videoAudio/audio" :class="{'nav-link':active=='digitalResource-audio'}" class="dropdown-link">数字音频</router-link></li>
                <li><router-link to="/videoAudio/text" :class="{'nav-link':active=='digitalResource-text'}" class="dropdown-link">文字资源</router-link></li>
                <li><router-link to="/resource/post" :class="{'nav-link':active=='digitalResource-post'}" class="dropdown-link">文章</router-link></li>
                <li><router-link to="/resource/patent" :class="{'nav-link':active=='digitalResource-patent'}" class="dropdown-link">专利</router-link></li>
                <li><router-link to="/resource/report" :class="{'nav-link':active=='digitalResource-report'}" class="dropdown-link">报告</router-link></li>
                <li><router-link to="/resource/standard" :class="{'nav-link':active=='digitalResource-standard'}" class="dropdown-link">标准</router-link></li>
                <li><router-link to="/resource/ebook" :class="{'nav-link':active=='digitalResource-ebook'}" class="dropdown-link">电子书</router-link></li>
                <li><router-link to="/conference" :class="{'nav-link':active=='digitalResource-conference'}" class="dropdown-link">会议论文集</router-link></li>
              </ul>
            </li>
          </template> -->
          <li class="nav-item has-dropdown">
            <a href="#" class="nav-link">特色服务</a>
            <ul class="dropdown-menu">
              <li><a href="#" class="dropdown-link">学术评价</a></li>
              <li><a href="#" class="dropdown-link">知识发现</a></li>
              <li><a href="#" class="dropdown-link">研究分析</a></li>
            </ul>
          </li>
          <li class="nav-item has-dropdown">
            <router-link to="/news" class="nav-link">动态资讯</router-link>
          </li>
          <li class="nav-item has-dropdown" :class="{actived:active == 'usercenter'}">
            <router-link to="/usercenter" class="nav-link">个人中心</router-link>
            <ul class="dropdown-menu">
              <li><router-link to="/cart" class="dropdown-link">我的购物车</router-link></li>
              <li><router-link to="/microapp/eprint/myAllPaper" class="dropdown-link">我的预印本</router-link></li>
              <!-- <li><router-link to="/order" :class="{'nav-link':active=='digitalResource-order'}" class="dropdown-link">我的订单</router-link></li> -->
              <li><router-link to="/journalArticle" :class="{'nav-link':active=='digitalResource-journalArticle'}" class="dropdown-link">我的论文</router-link></li>
              <!-- <li><router-link to="/usercenter" class="dropdown-link">我的下载</router-link></li> -->
              <!-- <li><router-link to="/usercenter" class="dropdown-link">我的收藏</router-link></li> -->
              <!-- <li><router-link to="/setting" class="dropdown-link">个人设置</router-link></li> -->
            </ul>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link">帮助</a>
          </li>
        </ul>
      </nav>

      <!-- User Section -->
      <div class="user-section">
        <div v-if="!user" @click="toLogin" class="auth-link">注册/登录</div>
        <div v-if="user" class="AppHeader__userInfo">
          <base-dropdown style="height: 28px" v-if="user" placement="bottom" @command="handleCommand">
            <button type="button" class="Button Button--plain">
              <avatar round :size="28" :url="user.avatar"></avatar>
            </button>
            <base-dropdown-menu slot="dropdown">
              <base-dropdown-item v-if="!hasRole(['consumer'])" command="console">
                <svg t="1755162644355" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6841" width="12" height="12"><path d="M819.182933 955.716267a34.1504 34.1504 0 0 1 0 68.283733H204.8a34.1504 34.1504 0 0 1 0-68.283733H819.2z m34.133334-955.716267C947.5072 0 1024 71.406933 1024 159.232v568.951467c-0.136533 87.842133-76.629333 159.232-170.683733 159.232H170.666667C76.6464 887.432533 0 816.042667 0 728.200533V159.249067C0 71.406933 76.629333 0 170.683733 0H853.333333z m0 68.283733H170.666667c-56.507733 0-102.4 40.789333-102.4 90.965334v568.9344c0 50.158933 45.892267 90.965333 102.4 90.965333h682.615466c56.5248 0 102.417067-40.8064 102.417067-90.965333V159.249067C955.733333 109.090133 909.824 68.266667 853.333333 68.266667zM578.816 310.442667l6.2464 3.584c11.52 7.0144 15.633067 22.528 9.233067 34.8672l-98.986667 184.098133c-5.9904 11.52-19.182933 16.1792-30.378667 11.144533l-2.7136-1.4336h0.068267l-6.314667-3.584c-11.52-7.031467-15.633067-22.528-9.233066-34.884266l98.986666-184.081067c6.724267-12.202667 21.4016-16.520533 33.092267-9.728z m-298.103467 4.676266a23.944533 23.944533 0 0 1 33.6384-1.877333l2.286934 2.218667c9.079467 9.898667 9.591467 25.463467 1.604266 36.010666l-1.8432 2.184534L248.32 426.666667l68.5568 73.045333a28.672 28.672 0 0 1-0.034133 38.4512c-9.216 9.898667-23.773867 10.5472-33.6896 1.9456l-2.048-1.979733-85.896534-91.767467a29.781333 29.781333 0 0 1-1.860266-37.137067l1.877333-2.269866 85.504-91.869867z m426.461867 0.034134a23.944533 23.944533 0 0 1 33.672533-1.928534l2.048 1.979734 85.879467 92.3136c4.949333 4.898133 7.68 11.8784 7.458133 19.114666 0.1024 6.365867-1.877333 12.509867-5.495466 17.442134l-1.962667 2.3552-85.879467 91.648c-9.2672 10.052267-23.671467 10.717867-33.6896 2.013866l-2.218666-2.184533a28.535467 28.535467 0 0 1-1.6896-35.976533l1.8432-2.184534 68.0448-73.1136-68.0448-73.0112a28.689067 28.689067 0 0 1 0.034133-38.468266z" fill="#676767" p-id="6842"></path></svg>&nbsp;后台管理
              </base-dropdown-item>
              <base-dropdown-item  command="setting" icon="base-icon-setting">设置</base-dropdown-item>
              <base-dropdown-item command="logout" icon="base-icon-switch-button">退出</base-dropdown-item>
            </base-dropdown-menu>
          </base-dropdown>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { Avatar } from '@zkwq/business'
export default {
  name: 'AppHeader',
  components: { Avatar },
  data() {
    return {
      // Component data
      menuConfig: {
        "期刊资源": {
          type: "normal",
          path: "/journal",
          key: "journal"
        },
        "会议论文资源": {
          type: "normal",
          path: "/conference",
          key: "conference"
        },
        "电子资源": {
          type: "dropdown",
          key: "digitalResource",
          children: [
            { name: "数字视频", path: "/resource/video", key:"digitalResource-video" },
            { name: "数字音频", path: "/resource/audio", key:"digitalResource-audio" },
            { name: "文字资源", path: "/resource/text", key:"digitalResource-text" },
            { name: "文章", path: "/resource/post", key:"digitalResource-post" },
            { name: "专利", path: "/resource/patent", key:"digitalResource-patent" },
            { name: "报告", path: "/resource/report", key:"digitalResource-report" },
            { name: "标准", path: "/resource/standard", key:"digitalResource-standard" },
            { name: "电子书", path: "/resource/ebook", key:"digitalResource-ebook" },
          ]
        }
      }
    }
  },
  props:{
    active:{
      type:String,
      default:''
    }
  },
  computed: {
     finalMenuList() { 
      let sourceInfo = this.magazine && this.magazine.sourceInfo ? this.magazine.sourceInfo : '期刊资源,会议论文资源,电子资源';
        return sourceInfo
          .split(",")
          .map(item => this.menuConfig[item])
          .filter(Boolean); // 过滤掉没配置的
      }
  },
  methods: {
    // Component methods
    handleCommand(command) {
      if (command === 'logout') {
        this.outLogin();
      } else if (command === 'console') {
        location.href = '/console/'
      } else if (command === 'setting') {
        this.$router.push('/setting')
      }

    }
  }
}
</script>

<style scoped lang="scss">
@import '@zkwq/business/dist/var.scss';

.app-header {
  width: 100%;
  background: linear-gradient(135deg, $--color-primary 0%, $--color-primary-light-1 100%);
  height: 60px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1000;
  display: flex;
  justify-content: center;
}

.header-container {
  min-width: 1200px;
  // margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

/* Logo Section */
.logo-section {
  display: flex;
  align-items: center;
  margin-right: 50px;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;
  img {
      height: 44px;
      margin-right: 8px;
  }
  span{
      font-size: 23px;
  }
}

.cloud-icon {
  margin-right: 8px;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  color: white;
  letter-spacing: 1px;
}

/* Navigation */
.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  overflow: visible;
}

.nav-item {
  position: relative;
  padding: 0 20px;
}


.nav-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  white-space: nowrap;
  padding: 4px 12px;

}

.actived .nav-link {
  background: $--color-primary-light-2;
  border-radius: 6px;

}

.nav-link:hover {
  color: #E8F4FD;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Dropdown Menu */
.has-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu {
  position: absolute;
  top: 161%;
  left: -5%;
  transform: translateX(-50%) translateY(-10px);
  background: white;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 1001;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid white;
}

.dropdown-link {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease;
}

.dropdown-link:hover {
  background-color: #f5f5f5;
  color: #4A90E2;
}

/* User Section */
.user-section {
  display: flex;
  align-items: center;
}

.auth-link {
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  transition: all 0.3s ease;
  white-space: nowrap;
  cursor: pointer;
}

.auth-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-1px);
}

.AppHeader__userInfo {
  margin-left: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.AppHeader__userInfoText {
  margin: 0 12px;
  color: $--color-text-regular;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .header-container {
    padding: 0 15px;
  }

  .nav-item {
    margin: 0 15px;
  }

  .nav-link {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .header-container {
    padding: 0 10px;
  }

  .nav-item {
    margin: 0 10px;
  }

  .nav-link {
    font-size: 14px;
  }

  .logo-text {
    font-size: 20px;
  }

  .auth-link {
    font-size: 14px;
    padding: 6px 12px;
  }
}

@media (max-width: 640px) {
  .main-nav {
    display: none;
  }

  .header-container {
    justify-content: space-between;
  }
}
</style>